<template>
  <!-- 统计报表 -->
  <div class="statistic-report">
    <div v-if="formReport.answerStatisticsList">
      <div 
        class="cmp-item"
        v-for="(cmp, cmpIndex) in components" 
        :key="cmpIndex">
        <component 
          :is='getCurModelComponent(cmp)'
          :formItem="cmp"
          :showAll="cmp.result?.length <= 4"
          @handleShowAll="handleShowAll"
        >
        </component>
      </div>
      <!-- 查看更多 弹窗 -->
      <el-dialog
        v-model="openDialog"
        title="全部"
        width="40%"
      >
        <div 
          class="cmp-item"
          v-for="(cmp, cmpIndex) in components" 
          :key="cmpIndex">
          <component 
            v-if="curDialogCmpId == cmp.formItemId"
            :is='getCurModelComponent(cmp)'
            :formItem="cmp"
            :showAll="true"
          >
          </component>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="openDialog = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, markRaw, computed } from 'vue'
import Input from "./components/Input.vue"
import Radio from "./components/Radio.vue"
import FileUpload from "./components/FileUpload.vue"

const props = defineProps({
  formReport: {
    type: Object,
    default: () => {
      return {}
    }
  },
})
const formReport = computed(()=>{return props.formReport})
const components = computed(()=>{return formReport.value?.answerStatisticsList.filter(cmp => cmp.type != 'pagenation') || []})
const componentsList = ref([
  { component: markRaw(Input), type: 'input' },
  { component: markRaw(Input), type: 'textarea' },
  { component: markRaw(Input), type: 'baseInfo' },
  { component: markRaw(Input), type: 'phone' },
  { component: markRaw(Input), type: 'identity' },
  { component: markRaw(Input), type: 'native' },
  { component: markRaw(Radio), type: 'radio' },
  { component: markRaw(Radio), type: 'checkbox' },
  { component: markRaw(FileUpload), type: 'fileUpload' },
  { component: markRaw(FileUpload), type: 'imgUpload' },
  { component: markRaw(Radio), type: 'vote' },
  { component: markRaw(Radio), type: 'selectSingle' },
  { component: markRaw(Radio), type: 'selectMultiple' },
])
const getCurModelComponent = (cmp) => {
  let curCmp = componentsList.value.find(item => {
    return item.type == cmp.type
  })
  return curCmp?.component || markRaw(Input)
}
const openDialog = ref(false)
const curDialogCmpId = ref()
// 显示更多
const handleShowAll = (cmp) => {
  curDialogCmpId.value = cmp.formItemId
  openDialog.value = true
}
</script>
<style scoped lang='scss'>
 .cmp-item{
  ::v-deep(.form-statistics-container){
    .qs-box{
      .top-box{
        margin: 20px 0;
        .label-box{
          margin-bottom: 10px;
          font-weight: 600;
          line-height: 24px;
        }
        .writer-num{
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #666;
          font-size: 14px;
          .model-type-group{
            margin-left: 10px;
          }
        }
        .cmp-type{
          font-size: 14px;
          color: #666;
          font-weight: normal;
          margin-left: 8px;
        }
      }
      .table{
        margin-bottom: 40px;
      }
      .chart-box{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>